<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.main{
			width: 600px;
			height: 400px;
			/* border: 1px solid red; */
			position: relative;
			/* 设置元素居中 */
			margin: auto;
		}
		.main img{
			width: 100%;
			height: 100%;
			position: absolute;
			/* opacity元素透明，越接近0元素越透明，越接近1，元素越清晰 */
			opacity: 0;
			/* 过渡，达到某种状态需要的时间 */
			transition: opacity 0.5;
		}
		img.active{
			opacity: 1;
		}
		
		
		</style>
	</head>
	<body>
		<div class="main">
			<img src="img/img-slide-1.jpg" class="active"/>
			<img src="img/img-slide-2.jpg" />
			<img src="img/img-slide-3.jpg" />
			<img src="img/img-slide-4.jpg" />
			<img src="img/img-slide-5.jpg" />			
		</div>
	</body>
	<script>
	window.onload=function(){
		// 声明索引，赋初始值0
		var currentIndex=0
		// 选中页面上的所有img标签，返回一个节点数组
		var imglist=document.querySelectorAll("img")
		// 获取元素的长度
		var imgLength=imglist.length
		// 设置定时操作，每个3S执行一次
		
		window.setInterval(function(){
			// 当前元素移除class为active的属性
			imglist[currentIndex].classList.remove("active")
			// 改变索引值，控制在0-4，不超过索引最大长度，以免发生数组越界异常
			currentIndex=(currentIndex+1)%imgLength
			// 为下一张图片添加class属性为active
			imglist[currentIndex].classList.add("active")
		},3000)
		
		
	}
	
	
	</script>
</html>
